<template>
  <div style="margin-top: 20px">
    <transition name="el-fade-in-linear">
      <div v-if="show" class="transition-box">
        <div>
          <el-breadcrumb
            style="margin: 5px 0px 0px 30px"
            separator-class="el-icon-arrow-right"
          >
            <el-breadcrumb-item :to="{ path: '/userInformation' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
          </el-breadcrumb>
          <table border="0" style="margin: 50px auto 0px" cellspacing="0">
            <tr>
              <th>头像</th>
              <th>用户昵称</th>
              <th>性别</th>
              <th>国家</th>
              <th>省</th>
              <th>市</th>
              <th>身份</th>
              <th>操作</th>
            </tr>
            <tr
              v-for="(item, index) in newUserList"
              :key="index"
              style="height: 120px"
            >
              <td style="text-align: center">
                <img style="width: 80px" :src="item.avatarurl" alt="" />
              </td>
              <td style="text-align: center; width: 80px">
                {{ item.nickname }}
              </td>
              <td style="text-align: center; width: 60px">
                {{ item.gender == 1 ? "男" : "女" }}
              </td>
              <td style="text-align: center; width: 60px">
                {{ item.country }}
              </td>
              <td style="text-align: center; width: 60px">
                {{ item.province }}
              </td>
              <td style="text-align: center; width: 60px">{{ item.city }}</td>
              <td style="text-align: center; width: 60px">
                {{ item.identity == 0 ? "用户" : item.identity==1?"商家":"管理员" }}
              </td>
              <td
                colspan="2"
                style="text-align: center; width: 160px; padding: 0px 30px"
              >
                <template :slot-scope="item">
                  <button
                    @click="edit(item)"
                    style="
                      width: 75px;
                      float: left;
                      background-color: #008000;
                      color: white;
                    "
                  >
                    修改
                  </button>
                  <el-popconfirm
                    :title="'确定删除这位' + item.nickname + '吗？'"
                    @confirm="confirm(item)"
                  >
                    <button
                      slot="reference"
                      style="
                        width: 75px;
                        float: right;
                        background-color: #e31939;
                        color: white;
                      "
                    >
                      删除
                    </button>
                  </el-popconfirm>
                </template>
              </td>
            </tr>
            <tr>
              <td colspan="8" style="background-color: #fff">
                <el-pagination
                  style="text-align: center"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage1"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="userList.length"
                >
                </el-pagination>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="showLogin" v-else><img src="../../assets/loginImage.gif" alt="login"></div>
      
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      userList: [],
      newUserList: [],
      currentPage1: 1,
      show: false,
    };
  },
  created() {
    this.getUser();
    this.getUserList();
  },
  mounted() {},
  methods: {
    getUser() {
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
    },
    getUserList() {
      // 请求列表
      this.$http
        .get(
          "FoodWeb/getUserListAction.action",
          { params: { userid: this.user.userId, token: this.user.token } },
          { dataType: "json" }
        )
        .then((res) => {
          this.userList = res.data.userList;
          this.newUserList = res.data.userList.slice(0, 10);
          this.show = true;
          console.log(res);
        });
    },
    handleCurrentChange(res) {
      // 分页列表
      this.newUserList = this.userList.slice(res * 10 - 10, res * 10);
      console.log(res);
    },
    handleSizeChange(res) {
      // 返回当前页
      console.log(res);
    },
    edit(scope) {
      // 跳转修改页加传参
      this.$router.push({ path: "/userManagement_edit", query: { scope } });
    },
    confirm(meet) {
      // 删除
      console.log(meet);
      this.$http
        .get("FoodWeb/deleteUserAction.action", {
          params: {
            obuserid: meet.userId,
            userid: this.user.userId,
            token: this.user.token,
          },
        })
        .then((result) => {
          if(result.data.resultcode==0)location.reload();
          console.log(result);
        });
    },
  },
};
</script>

<style lang="less" scoped>
table tr:nth-child(even) {
  background: #f8f8f8;
}
.showLogin{
  width: 400px;
    margin: 50px auto 0px;
  
}
</style>